<template>
    <div>
        <div>pinia的基本使用</div>

        <div>
            <el-button @click="setUserInfo">设置userInfo</el-button>
            <el-button @click="resetUserInfo">清除userInfo</el-button>
        </div>

        <div>userStore</div>
        <div>{{userInfo.token}}</div>
        <div>{{userInfo.name}}</div>
        <div>{{userInfo.age}}</div>

        <div>{{userInfo.userInfo.token}}</div>
        <div>{{userInfo.userInfo.name}}</div>
        <div>{{userInfo.userInfo.age}}</div>
        <!--<div>{{test.arr}}</div>-->

     <!--   <div style="width: 600px;height: 360px">
            <video-player
                    :options="playerOptions"
                    poster
                    class="video-player vjs-custom-skin"
                    :playsinline="true"
                    style="object-fit:fill"
                    :volume="0.6"
                    @loadeddata="videoLoad"
            />
        </div>-->
        <div v-for="item in x">
            <videoCom  :src="item"></videoCom>
        </div>
        <div>
            <!--  <video  class="videoClass"  h-full w-full :src="v" controls></video>-->
        </div>
        <el-button @click="opens">打开</el-button>
        <el-button @click="opens2">打开dialog2 这种方式不要用于传值</el-button>
        <!--  <Dialog v-if="visible" :visible="visible"  title="nihao" :rowData="rowData" @cancel="cancelModal"></Dialog>-->
        <Dialog v-if="visible" :visible="visible"  title="nihao" :rowData="rowData" @cancel="cancelModal"></Dialog>
        <Dialog2 ref="dialog2"></Dialog2>
        <Unocss></Unocss>
        <hr>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="success">成功按钮</van-button>
        <van-button type="default">默认按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <hr>
        <van-form @submit="onSubmit">
                    <van-checkbox-group
                    v-model="form.gender"
                    name="gender"
                    required
                    :rules="[{ required: true, message: 'Please select a gender'}]"
                 >
                <van-checkbox  shape="square" name="male" :label="'Male'">Male</van-checkbox>
                <van-checkbox  shape="square" name="female" :label="'Female'">Female</van-checkbox>
                <van-checkbox  shape="square" name="femal321e" :label="'321Female'">Female</van-checkbox>
                <van-checkbox  shape="square" name="femal323211e" :label="'321321Female'">Female</van-checkbox>
            </van-checkbox-group>
            <br>
            <van-field name="checkboxGroup" label="复选框组" :rules="[{ required: true, message: 'Please select a gender'}]">
                <template #input>
                    <van-checkbox-group v-model="form.groupChecked" direction="horizontal">
                        <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
                        <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">Submit</van-button>
            </div>
        </van-form>
    </div>
</template>

<script  setup lang="ts">
    // import v  from "../../assets/test.mp4"
    import {ref,reactive,onMounted} from 'vue'
    // import Dialog from "./components/dialog.vue"
    // import Dialog2 from "./components/dialog2.vue"
    import videoCom from "./video/index.vue"
    // import Unocss from "./components/Unocss.vue"
    import { useUserInfoStore } from '../../store/userInfo';
    import {storeToRefs} from "pinia";
    import { testStore } from '../../store/test';
    const userInfo = useUserInfoStore()
    // const {name,age,token} = storeToRefs(userInfo)   //解构 防止丢失响应式; 解构方法不需要使用storeToRefs 直接解构即可
    const test = testStore()
    console.log("userInfo",userInfo)
    console.log("test",test)

    let v = 'https://wecrestest.campusphere.net/activity/1019339096624724/attachment/29c69e5b9d5f475d887c5e507740a12b/trim.28378B22-52FE-4D66-BA07-1D2805AD5A8B.MOV';
    let x = [v,v,v,v]
    const setUserInfo = ()=>{
        let info = {
            name:"wfs2",
            age:30,
            token:"tokens2"
        }
        userInfo.setUserInfo(info)
        // userInfo.$patch({
        //     userInfo:{
        //         name:"wfs2",
        //         age:userInfo.userInfo.age+1,
        //         token:"tokens2"
        //     }
        // })

    }
    // 修改方式2
    const resetUserInfo = ()=>{
        userInfo.resetUserInfo()
        // 替换原state
        // userInfo.$patch({
        //     userInfo:{
        //         name:"wfs1",
        //         age:20,
        //         token:"tokens1"
        //     }
        // })
    }
    // 修改方式3
    const resetUserInfo2 = ()=>{
        userInfo.$patch( state => {
            state.userInfo.name = 'yaoqi4'
            state.userInfo.age = 100
            state.userInfo.token = "tokens1dasdsa"
        })
    }
    // 视频链接地址
    // let videoSrc = ref('http://vjs.zencdn.net/v/oceans.mp4');

    // 视频播放器配置
    let playerOptions = ref({
        // height: 200,
        // width: document.documentElement.clientWidth, //播放器宽度
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        // autoplay: 'any', // 如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: true, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controls: true,
        sources: [
            {
                type: "", //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
                src: v //url地址
            }
        ],
        controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true // 全屏按钮
        }
    })
    //展示视频封面
   const videoLoad = (o)=>{
        //获取video标签
        let video = document.getElementById(o.target.getAttribute("id")+'_html5_api');
       // console.log(video.videoWidth )
       // console.log(video.videoHeight )
        //定义缩放比例
        let scale = 1;
        //创建canvas画布
        let canvas = document.createElement("canvas");
        //canvas宽高为video宽高*缩放比例
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        //canvas画出视频封面
        canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
        //canvas转base64
        let src = canvas.toDataURL("image/png");
        //赋值到playerOptions.poster
        this.playerOptions.poster = src;
    }
    const dialog2 = ref<any>(null);

    let visible = ref(false)
    let rowData = ref({a:"a"})

    const cancelModal = ()=>{
        console.log("关闭")
        visible.value= false
    }
    const opens = ()=>{
        visible.value=true
    }

    const opens2 = ()=>{
        dialog2.value.open()
    }
    let formRef = ref()
    let form = reactive({
        name:"",
        email:"",
        gender:[],
        groupChecked:[]
    })
    const onSubmit = (values:any)=> {
        formRef.value.validate((valid: any) => {
            if (valid) {
                console.log('Form submitted with values:', values);
            } else {
                console.log('Form validation failed');
            }
        })
    }
    // let a:number=100;
</script>

<style scoped>

</style>